<template>
	<view class="index">
		<view class="title">事件</view>
		<button type="primary" @click="num++">行内-{{num}}</button>
		<button type="warn" v-on:click="num--">行内-{{num}}</button>
		<view class="title">事件响应方法</view>
		<button type="primary" @click="say">say</button>
		<button type="warn" @click="say($event)">say2</button>
		<view class="title">事件传参</view>
		<button size="mini" type="primary" @click="doit('今天是个好日子','花钱的好日子')">doit</button>
		<button size="mini" type="warn" @click="doit('为什么这么多节日','没有节日怎么活动')">doit2</button>
		<view class="title">方法返回值</view>
		<button>{{back("你好")}}</button>
		<p>{{msg}}</p>
		<input type="text" v-model="msg"/>
		<p>{{rmsg}}</p>
	</view>
</template>
<script>
	export default{
		data(){
			return {
				num:uni.getStorageSync("num")||1,
				msg:"今天是发红包的日子"
			}
		},
		// 计算是从现有数据计算出新的数据
		// 计算式多对一，可以用多个数据计算出一个数据
		// 计算computed有缓存，只有依赖（msg）数据不变，函数是不会重新执行
		computed:{
			rmsg:function(){
				return this.msg.split('').reverse().join('')
			}
		},
		watch:{
			// 监听值类型 ，可以有nval最新的值，oval之前的值
			// 监听引用类型，必须加deep:true,nval和oval是一值
			// 监听一个多：监听一个可以修改多个
			// 监听没有缓存
			"num":{
				handler(nval,oval){
				console.log(nval,oval);
				// 存储num的值
				uni.setStorageSync("num",nval);
				},
				deep:true
			}
		},
		methods:{
			back(str){
				// 在方法中访问data
				return str.repeat(this.num);
			},
			doit(title,content){
				uni.showModal({
					title,
					content
				})
			},
			say(e){
				console.log(e);
				uni.showToast({
					title:"你好事件"
				})
			}
		}
	}
</script>
<style scoped lang="scss">
	input{
		height: 66rpx;
		line-height: 66rpx;
		border:1rpx solid #f0f0f0;
		border-radius: 12rpx;
		padding: 0 15rpx;
		margin: 15rpx;
	}
	.title{
		height: 88rpx;
		line-height: 88rpx;
		background-color: #f0f0f0;
		padding: 0 15rpx;
		// border-top: 4rpx solid #f30;
	}
	
</style>